<template>
	<view>
		<map :markers="map" :latitude="map[0].latitude" :longitude="map[0].longitude" enable-3D show-location enable-poi
			enable-overlooking show-compass></map>
		<view class="hm-p-lr-20">
			<view class="shop-box active" @click="back()">
				<view>
					<view class="left">
						<view class="hm-col-0 hm-font-30 hm-font-b hm-line-1">
							{{shop.shop_name}}
							<view class="hm-dis-block-inline hm-m-l-10">
								<u-tag :text="shop.status.text" :type="shop.status.value?'success':'error'" size="mini" plain></u-tag>
							</view>
						</view>
						<view class="hm-col-tips hm-font-28 hm-line-1 hm-m-t-20">
							<view class="hm-dis-block-inline hm-m-r-10">
								<u-icon name="map" size="16" color="#999"></u-icon>
							</view>
							{{shop.address}}
						</view>
						<view class="hm-col-tips hm-font-28 hm-m-t-10">
							<view class="hm-dis-block-inline hm-m-r-10">
								<u-icon name="clock" size="15" color="#999"></u-icon>
							</view>
							{{shop.shop_hours}}
						</view>
					</view>
					<view class="right">
						<view class="hm-col-content hm-font-28">
							{{shop.status.value?'去下单':'去看看'}}
						</view>
						<view class="hm-col-tips hm-font-24 hm-p-tb-20">距离{{shop.location}}</view>
						<view>
							<view class="icon" @click.stop="phone(shop.phone)">
								<u-icon name="phone-fill" color="#909399"></u-icon>
							</view>
							<view class="icon hm-m-l-30" @click.stop="openLocation()">
								<u-icon name="map-fill" color="#909399"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="triangle-bottom-right"></view>
				<view class="triangle-bottom-right-icon">
					<u-icon name="checkbox-mark" size="20" color="#fff"></u-icon>
				</view>
			</view>
			<block v-for="(item, index) in list" :key="index">
				<view v-if="item.shop_id != shop.shop_id" class="shop-box" @click="back(index)">
					<view class="left">
						<view class="hm-col-0 hm-font-30 hm-font-b hm-line-1">
							{{item.shop_name}}
							<view class="hm-dis-block-inline hm-m-l-10">
								<u-tag :text="item.status.text" :type="item.status.value?'success':'error'" size="mini" plain></u-tag>
							</view>
						</view>
						<view class="hm-col-tips hm-font-28 hm-line-1 hm-m-t-20">
							<view class="hm-dis-block-inline hm-m-r-10">
								<u-icon name="map" size="16" color="#999"></u-icon>
							</view>
							{{item.address}}
						</view>
						<view class="hm-col-tips hm-font-28 hm-m-t-10">
							<view class="hm-dis-block-inline hm-m-r-10">
								<u-icon name="clock" size="15" color="#999"></u-icon>
							</view>
							{{item.shop_hours}}
						</view>
					</view>
					<view class="right">
						<view class="hm-col-content hm-font-28">
							{{item.status.value?'去下单':'去看看'}}
						</view>
						<view class="hm-col-tips hm-font-24 hm-p-tb-20">距离{{item.location}}</view>
						<view>
							<view class="icon" @click.stop="phone(item.phone)">
								<u-icon name="phone-fill" color="#909399"></u-icon>
							</view>
							<view class="icon hm-m-l-30" @click.stop="openLocation(index)">
								<u-icon name="map-fill" color="#909399"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	const App = getApp();

	export default {
		data() {
			return {
				map: [{
					latitude: '',
					longitude: '',

				}],
				shop: {}, //选中的门店
				list: {},
				applet: {}
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			let _this = this; // 获取列表
			_this.getShopList();
			_this.applet = uni.getStorageSync('applet');
			_this.shop = uni.getStorageSync('shop');
			let location = _this.shop.coordinate;
			location = location.split(',');
			_this.map[0].latitude = location[0];
			_this.map[0].longitude = location[1];
		},
		methods: {
			/**
			 * 拨打电话
			 */
			phone: function(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			/**
			 * 查看门店位置
			 */
			openLocation: function(index = -1) {
				let _this = this,
				shop = _this.shop;
				if (index >= 0) {
					shop =  _this.list[index];
				}
				let location = shop.coordinate;
				location = location.split(',');
				uni.openLocation({
					latitude: Number(location[0]),
					longitude: Number(location[1]),
					name: shop.shop_name,
					address: shop.address,
					success: function () {}
				});
			},
			/**
			 * 选择门店 - 返回
			 */
			back: function(index = -1) {
				let _this = this;
				if (index >= 0) {
					uni.setStorageSync('shop', _this.list[index]);
				}
				uni.navigateBack(); //返回 
			},

			/**
			 * 获取分类列表
			 */
			getShopList: function() {
				let _this = this;
				App._get('shop/lists', {}, function(result) {
					_this.setData(result.data);
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	map {
		width: 750rpx;
		height: 500rpx;
	}

	.active {
		border: 1rpx solid #ff9900;
		.triangle-bottom-right {
			display: inline-block;
			float: right;
			margin-right: -210rpx;
			width: 0;
			height: 0;
			border-bottom: 40rpx solid #ff9900;
			border-left: 40rpx solid transparent;
		}
		.triangle-bottom-right-icon {
			display: inline-block;
			float: right;
			margin-right: -216rpx;
			margin-top: 12rpx;
		}
	}
	.shop-box {
		padding: 40rpx 20rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.left {
			width: 70%;
			display: inline-block;
			height: 155rpx;
		}
		.right {
			float: right;
			width: 25%;
			text-align: center;
			display: inline-block;
			padding-left: 20rpx;
			border-left: 1rpx solid #f7f7f7;
			.icon {
				padding: 10rpx;
				border-radius: 50%;
				background-color: #f3f4f6;
				display: inline-block;
			}
		}
	}
</style>
